import React, { useState } from 'react';
import GC from "@grapecity/spread-sheets"
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
import {
  IO
} from "@grapecity/spread-excelio";
import { Button } from "antd";
import "@grapecity/spread-sheets-resources-zh"

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';


GC.Spread.Common.CultureManager.culture("zh-cn")
interface IShareProps {
}

const Share: React.FunctionComponent<IShareProps> = (props): any => {
  const [initSpread, setinitSpread] = useState()
  const [importExcelFile, setimportExcelFile] = useState()
  const changeFileDemo = (e:any) => {
    // console.log(e.target.files[0],'e.target--console')
    setimportExcelFile(e.target.files[0])
  }
  const loadExcel = (e:any) => {
    // let spread = this.spread;
    let excelIo = new IO();
    // let excelFile = this.importExcelFile;
    // let password = this.password;
    // here is excel IO API
    console.log(importExcelFile,'importExcelFile--console')
    
  //   if(importExcelFile){
  //   excelIo.open(importExcelFile, function (json:any) {
  //       let workbookObj = json;
  //       initSpread.fromJSON(workbookObj);
  //   }, function (e:any) {
  //       // process error
  //       alert(e.errorMessage);
  //   }, { password: "password" });
  // }
}
  const workbookInitialized = function (workbook: any) {
    // self.spread = workbook;
    setinitSpread(workbook)
    console.log(workbook.getSheetCount());
  }
  return (
    <div className="ShareBox contentBox">
      <Button onClick={(e) => {loadExcel(e)}}>导入</Button>
      <input type="file" id="fileDemo" className="input" onChange={e=>changeFileDemo(e)}/>
      <br />
      <br />
      <br />
      <div style={{width: "100%",height: "calc(100% - 100px)"}}>
        <SpreadSheets workbookInitialized={workbookInitialized}></SpreadSheets>
      </div>
    </div>
  );
};

export default Share;
